今回は、ボタンをクリックするとウィンドウがポップアップしたり、開いたウィンドウがスクロールするJAVAスクリプトをご紹介します。この機能を利用すれば、単にリンクを貼っただけのページよりも、ウィンドウに表示される内容を目立たせることができます。たとえば、注意書きや更新情報など、来訪者にぜひ見てもらいたい内容をアピールさせてみましょう!

→
 
ウィンドウがポップアップするJAVAスクリプトを設定しようボタンをクリックしたら、ウィンドウがポップアップするスクリプトを設定してみましょう。下記のスクリプトを、HTMLの<head>〜</head>内に貼り付けます。
<SCRIPT LANGUAGE="JavaScript">
<!--
function new_win(){
window.open("page.html","","width=550,height=400");
}
//-->
</SCRIPT>

4行目の「page.html」は、ポップアップするウィンドウに表示させるHTMLファイルの名を入れます。「width=400」は横幅を、「height=100」は縦幅を表わしているので、好みの数値に設定しましょう。次に、下記のソースをHTMLに挿入し、ウィンドウを開くボタンを設定します。
<FORM>
<INPUT type="button" value="ウインドウ" onClick="new_win()">
</FORM>

2行目の「ウィンドウ」は、ボタンに表示される文字列になりますので、好き なものに変更します。これで、クリックするとウィンドウがポップアップするボタンが設定できました。


→
 
前項のスクリプトでは、1つのウィンドウしか開きませんでした。次に、複数のウィンドウをそれぞれ開くためのスクリプト改造方法を見ていきます。先ほど利用したスクリプトを下記のように変更しましょう。
<SCRIPT LANGUAGE="JavaScript">
<!--
function new_win(){
window.open("page.html","","width=550,height=400");
}
function new_win2(){
window.open("page2.html","","width=550,height=400");
}

//-->
</SCRIPT>
ウィンドウに表示させるHTMLは、4行目と7行目の「page.html」「page2.html」の部分に設定します。さらに、上記JAVAスクリプトの3行目6行目の、「new_win」と「new_win2」の名称と、下記のHTMLの3行目4行目の「onClick=」の右側とが一致するように注意しましょう。
<FORM>
<INPUT type="button" value="ウインドウ1" onClick="new_win()">
<INPUT type="button" value="ウインドウ2" onClick="new_win2()">
</FORM>
3行目4行目の「ウィンドウ1」「ウィンドウ2」は好きな文字列に変更できます。
それぞれのボタンを押すことで各ウィンドウがポップアップするようになります。


→
 
今度はウィンドウに動きを付け、ポップアップし定位置までスクロールするよ うにしましょう。
下記のスクリプトを、HTMLの<head>〜</head>内に貼り付けます。
<SCRIPT LANGUAGE="JavaScript">
<!--
function new_win3(){
myWin=window.open("page3.html","","width=550,height=400");
Move();
}
x=0;
function Move(){
myWin.moveTo(x,0);
x+=1
if(x>=800){
return;
}
myID=setTimeout("Move()",10);
}
//-->
</SCRIPT>
ウィンドウに表示させるHTMLは4行目「page3.html」に設定します。ウィンドウのサイズ指定は、前項と同じ方法になります。ウィンドウの動き方は3つの数値によって、設定されています。10行目の「1」の部分は、1回に動く距離を、11行目の「800」はウィンドウの停止場所を表わしています。14行目の「10」は、1回動くための時間を設定しているので、これら数値を調整して速度や移動距離が変更できます。
下のソースをHTMLに挿入し、ウィンドウを開くためのボタンを設定します。
<FORM>
<INPUT type="button" value="動くウインドウ" onClick="new_win3()">
</FORM>
2行目の「動くウィンドウ」はボタンに表示される文字列になります。


どうでしょうか、ウィンドウはしっかりとポップアップして動きましたか?  今回のJAVAスクリプトは、IE5.5以上で動作確認されていますので、ぜひ皆さ んも挑戦してみてください!!

e[NECir Yahoo yV LINEf[^[z500~`I
z[y[W NWbgJ[h COiq@COsI COze